<template>
  <div>
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <el-input
          type="textarea"
          :autofocus="commentfocus"
          :rows="2"
          placeholder="请输入内容"
          v-model.lazy="textarea"
        >
        </el-input>
        <div class="commentBtn">
          <el-button type="success" @click="feathcomments">评论</el-button>
        </div>
      </div>
      <div class="classify-list">
        <!-- 评论列表 -->
        <el-card shadow="never">
          <ul :key="pager.pageIndex">
            <li
              class="comment-li"
              :class="pager.pageIndex + '-' + index"
              v-for="(item, index) in comments"
              :key="pager.pageIndex + '-' + index"
            >
              <div class="com-u" :key="pager.pageIndex + '-' + index">
                <Avatar
                  :key="Math.random().toString()"
                  :avatar="{
                    id: pager.pageIndex + '-' + index,
                    username:
                      item.nickname && item.nickname.length > 0
                        ? item.nickname
                        : item.username,
                    txcolor: item.txcolor,
                    bgcolor: item.bgcolor,
                  }"
                />
                <span class="un"
                  >{{
                    item.nickname && item.nickname.length > 0
                      ? item.nickname
                      : item.username
                  }}：</span
                >
              </div>

              <div class="com-c">
                <div>
                  <span class="content">{{ item.comment }}</span>
                </div>
                <div class="fb-time">
                  <span>{{ item.commentAt }}</span>
                </div>
              </div>
            </li>
          </ul>
        </el-card>
      </div>

      <div class="fyq">
        <el-pagination
          @current-change="handleIndex"
          :current-page="pager.pageIndex"
          layout="total, prev, pager, next"
          :total="pager.count"
          background
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<style lang='scss' scoped>
.commentBtn {
  padding-top: 30px;
  display: flex;
  flex-direction: row-reverse;
}
.comment-li {
  padding: 4px 0 10px 0px;
  margin-bottom: 10px;
  border-bottom: 1px dashed #e8eaee;
  display: flex;
  .com-u {
    position: relative;
    .un {
      position: absolute;
      font-weight: 800;
      width: 100px;
      top: 10px;
      left: 55px;
    }
  }

  .com-c {
    word-wrap: break-word;
    margin-top: 10px;
    margin-left: 70px;
    // display: flex;
    // align-items: flex-end;
    .fb-time {
      margin-top: 10px;
      color: #555;
      font-size: 12px;
    }
  }

  .un {
    // margin-left: 5px;
    color: #555666;
    font-weight: 400;
    // display: flex;
    // align-items: center;
    font-size: 15px;
  }
  .content {
    // display: flex;
    // align-items: center;
    // margin-left: 18px;
    // padding-left: 20px;
    word-wrap: break-word;
    color: #222226;
    font-size: 14px;
  }
}
.fyq {
  display: flex;
  justify-content: center;
  padding-top: 4px;
}

ul {
  list-style-type: none;
}
</style>

<script>
import { publishComment, getComment } from '../../api/comment'
import { getTokenValueData, isAuth } from '../../utils/auth'
import formatTime from '../../utils/formatTime'
import Avatar from '../../components/Avatar'
import bus from '../../lib/globalBus'
export default {
  data () {
    return {
      textarea: '',
      comments: [],
      pager: {
        pageIndex: 1,
        pageSize: 10,
        count: 15
      }
    }
  },
  components: {
    Avatar
  },
  mounted () {
    this.featchData()
    bus.$on('commentEvt', (e) => {
      this.featchData()
    })
  },
  methods: {
    errorHandler () {
      return true
    },
    featchData () {
      getComment(this.$route.params.id, this.pager).then(({ data }) => {
        console.log('评论', data)
        this.comments = []
        data.data.data.forEach((element) => {
          this.comments.push({
            id: element.id,
            username: element.username,
            nickname: element.nickname,
            txcolor: element.txcolor,
            bgcolor: element.bgcolor,
            commentAt: formatTime(element.createdTime),
            comment: element.commentContent
          })
        })
        this.pager.pageIndex = data.data.pager.pageIndex
        this.pager.pageSize = data.data.pager.pageSize
        this.pager.count = data.data.pager.rowsTotal
        // this.$emit('commentcount', this.pager.count)
      })
    },
    feathcomments () {
      if (!isAuth()) {
        this.$router.push('/login')
        return
      }

      if (this.textarea.trim().length < 1) {
        this.$message.warning('评论内容不能为空')
        return
      }
      var uid = getTokenValueData().userId
      publishComment({
        commentContent: this.textarea,
        userId: uid,
        articlesId: this.$route.params.id
      }).then(({ data }) => {
        this.comments.push({
          url: require('@/assets/logo.png'),
          username: getTokenValueData().username,
          comment: data.data.commentContent,
          txcolor: getTokenValueData().txcolor,
          bgcolor: getTokenValueData().bgcolor,
          commentAt: formatTime(data.data.createdTime)
        })
        this.textarea = ''
        this.pager.count++
      })
    },

    // 页码变化触发事件
    handleIndex (val) {
      this.pager.pageIndex = val
      this.featchData()
    }
  },
  props: {
    commentfocus: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    commentfocus () {
      // console.log(this.commentfocus)
    },
    'pager.count' (count) {
      // console.log('评论数量增加了', count)
      this.$emit('commentcount', count)
    }
  }
}
</script>

<style>
</style>
